<link rel="stylesheet" type="text/css" href="/static/manage/css/member/cloud/service/detail.css?v={$version}"/>
<style>
    .none-packet {
        color: #ff5722;
        text-align: center;
        padding: 50px 0;
    }
    .details-combo_log{
        text-align: center;
        cursor: pointer;
        padding: 10px 10px;
        border-radius: 5px;
    }
    .details-combo-log-title {
        padding: 10px 10px;
        border-radius: 5px;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
    <div class="layui-row layui-col-space1">
        <div class="layui-col-md12">
            <br>
            <span class="layui-breadcrumb">
                 <a href="/manage/member/cloud/service/index">服务市场</a>
                 <a><cite>购买套餐</cite></a>
     </span>
            <hr class="layui-border-blue">
        </div>
    </div>
    <div class="details-in">
        <div class="details-combo">
            <div class="details-combo-in">
                <div id="service1"></div>
            </div>
        </div>

        <div class="details-combo">
            <div class="details-combo-in" style="border: 1px solid #212943;border-radius: 5px;">
                <div class="details-combo-title">
                    请选择套餐
                </div>
                <div class="layui-row" id="packet">
                </div>
                <hr />
                <div class="details-pay">
                    <div class="details-pay-in">
                        <div class="details-pay-title">
                            应付金额：
                        </div>
                        <div class="details-pay-price" id="select_price">
                            ¥0.00
                        </div>
                        <div class="details-pay-btn" id="buy">
                            立即购买
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="details-combo">
            <div class="details-combo-in" style="display: flex;justify-content: space-between;width: 300px;cursor: pointer;">
                <div class="details-combo-title details-combo-log-title" lay-event="walletBill">
                    查看订单记录
                </div>
                <div class="details-combo-title details-combo-log-title" lay-event="order">
                    查看消费记录
                </div>
            </div>
        </div>

    </div>
</div>
</div>

<script id="service1_template" type="text/html">
    <div class="details-img">
        <img src="/static/manage/images/member/cloud/service/{{d.file_name}}-icon.png" />
        </div>
        <div class="details-title">
        {{d.name}}
        </div>
        <div class="details-text">
        <div class="details-text-left">
        总次数 : {{d.total}}次
    </div>
    <div class="details-text-right">
        剩余次数 : {{d.amount}}次
    </div>
    </div>
    <div class="details-describe">
        服务简介：{{d.name}}
    </div>
</script>

<script id="packet_template" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <div class="details-combo-items layui-col-lg3 layui-col-md6 layui-col-sm12" lay-selected-id="{{item.id}}" lay-selected-price="{{item.price}}">
        <div class="details-combo-item"  style="{{# if(index%2 == 0) { }} background: linear-gradient(
270deg, rgb(7, 213, 236) 0%, rgb(6, 165, 206) 100%);{{# }else{ }}background: linear-gradient(271deg, rgb(103, 189, 255) 0%, rgb(65, 134, 255) 100%);{{# } }}">
            <div class="details-combo-left">
                <div class="details-item-img">
                    <img src="/static/manage/images/member/cloud/service/details-icon.png" />
                </div>
                <div class="details-combo-text">
                    <div class="details-text-up">
                        套餐{{index+1}}
                    </div>
                    <div class="details-text-down">
                        次数：{{item.amount}}次
                    </div>
                </div>
            </div>
            <div class="details-combo-right">
                <span>￥</span>
                <div class="details-combo-price">{{item.price}}</div>
            </div>
        </div>
    </div>
    {{# }) }}
    {{# if(d.length === 0){ }}
        <div class="layui-col-md12 none-packet">
            <div><i class="layui-icon layui-icon-close-fill"></i><span class="null-sty">&nbsp&nbsp当前没有可购买的套餐...</span></div>
        </div>
    {{# } }}
</script>

<script>
    var service_id = "{$service_id}";
    var service_name = "{$service_name}";
</script>